<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSearchList } from "../../apis/music";
import { createWindow, ipcRendererSend } from "../../utils/ipcRenderer";
import { formatTime } from "../../utils/tool";

const props = defineProps(["videoList"]);

const handleVideo = (item) => {
  if (item.type == 0) {
    createWindow({
      windowName: "videoDetail",
      path: "videoDetail",
      width: 1360,
      height: 820,
      param: { id: item.vid },
    });
  } else {
    createWindow({
      windowName: "videos",
      path: "videos",
      width: 1360,
      height: 820,
      param: { id: item.vid },
    });
  }
  ipcRendererSend("windows-param", {
    emit: "playVideo",
    targetName: "home",
  });
};
</script>

<template>
  <div>
    <div v-if="videoList" class="video_container">
      <div class="video_wrap">
        <div class="item_wrap" v-for="(item, index) in videoList" :key="index">
          <div class="item">
            <div @click="handleVideo(item)" class="cover">
              <el-image lazy :src="item.coverUrl+`${'?param=300y300'}}`" fit="cover"></el-image>
              <span class="count"
                ><span class="iconfont el-icon-caret-right"></span>
                {{
                  item.playTime > 10000
                    ? Math.floor(item.playTime / 10000) + "万"
                    : item.playTime
                }}</span
              >
              <span class="time">{{ formatTime(item.durationms) }}</span>
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="name">{{ item.creator[0].userName }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <el-empty description="暂无视频"></el-empty>
    </div>
  </div>
</template>

<style scoped lang="scss">
.video_container {
  //   padding: 1rem 4.25rem;
  .video_wrap {
    display: grid;
    justify-content: space-around;
    grid-template-columns: repeat(auto-fill, 16vw);

    .item_wrap {
      //   width: 11.25rem;
      .item {
        margin-bottom: 30px;
        .cover {
          position: relative;
          height: 13vh;
          overflow: hidden;
          border-radius: 13px;
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 13px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
              0 0 6px rgba(0, 0, 0, 0.04);
            transition: all 0.2s;
            &:hover {
              transform: scale(1.1);
            }
          }
          .count {
            position: absolute;
            font-size: 8px;
            z-index: 5;
            top: 2%;
            right: 2%;
            color: #fff;
          }
          .el-icon-caret-right {
            font-size: 15px;
          }
          .time {
            position: absolute;
            font-size: 8px;
            z-index: 5;
            bottom: 2%;
            right: 2%;
            color: #fff;
          }
        }
        .title {
          font-size: 15px;
          font-weight: 600;
          line-height: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .name {
          font-size: 10px;
          color: #6e6e69;
        }
      }
    }
  }
}
</style>
